img{
    width: 100%;
    height: 100%;
}
video{
    width: 100%;
    height: 100%;
}
.w{
    width: 1400px;
    margin:  0 auto;
}
.play-box{
    margin-top: 100px;
    padding: 50px;
    .top-box{
        background-color: #f5f5f5;
        .top-content-box{
            height: 506px;
            display: flex;
            justify-content: space-between;
            .left-play-box{
                width: 900px;
                background-color: gray;
            }
            .right-tuijian-box{
                width: 450px;
                background-color: #f2f2f2;
                padding: 10px;
                overflow: scroll;
                h1{
                    border-left: 2px solid red;
                    padding-left: 5px;
                    font-weight: 800;
                    color: #3a3a3a;
                }
                .relatedMv-box{
                    .relatedMv-item{
                        display: flex;
                        margin: 20px 0;
                        .img-box{
                            width: 200px;
                            height: 100px;
                            margin-right: 20px;
                            position: relative;
                            overflow: hidden;
                            img{
                                border-radius: 10px;
                                transition: all 0.25s;
                            }
                            .hidden-play {
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translateY(-50%) translateX(-50%);
                                width: 35px;
                                height: 35px;
                                cursor: pointer;
                                opacity: 0;
                                transition: all 0.5s;
                            }
                            &:hover{
                                img{
                                    transform: scale(1.1);
                                }
                                .hidden-play{
                                    opacity: 1;
                                   
                                }
                            }
                        }
                        .relatedMv-content{
                            width: 230px;
                            color: gray;
                            box-sizing: border-box;
                            padding-top: 10px;
                            font-size: 14px;
                            p{
                                margin-bottom: 15px;
                            }
                        }
                    }
                }
            }
        }
        .mvInformation-box{
            margin-top: 15px;
            display: flex;
            color: gray;
            justify-content: space-between;
            align-items: center;
           .mvText{
               padding-left: 20px;
               .mvsName{
                   font-size: 20px;
                   font-weight: 800;
                   height: 30px;
                   line-height: 30px;
                   margin-bottom: 5px;
               }
               .mvsInformation{
                   padding: 20px 0px;
                   display: flex;
                   .playCount{
                       margin-right: 50px;
                   }
               }
           }
           .focus-box{
               margin-right: 100px;
                ul{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    li{
                        margin: 0 30px;
                        cursor: pointer;
                        &:hover{
                            color: pink;
                        }
                        i{
                            margin-right: 8px;
                            padding-left: 5px;
                        }
                    }
                }
           }
        }

    }
    .personalizedMv-box{
        margin-top: 15px;
        color: #ffffff;
        h2{
            padding: 15px 0px 0px 15px ;
            font-size: 23px;
            font-weight: 800;
           
        }
        .personalizedMv{
            display: flex;
            justify-content: space-between;
        
            .personalized-Item{
               
                    margin: 20px 20px 0 0;
                    width: 315px;
                    height: 212px;
                    
                    .img-box{
                        width: 315px;
                        height: 176px;
                        position: relative;
                        overflow: hidden;
                        border-radius: 10px;
                        img{
                            transition: all 0.25s;
                        }
                        .mvs-info{
                            position: absolute;
                            width: 94%;
                            height: 30px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            font-size: 13px;
                            padding: 0 10px;
                       
                            background-color: rgba($color: #000000, $alpha: 0.5);
                            bottom: 0;
                            left: 0;
            
                        }
                        .msv-playCount{
                            padding: 2px 5px;
                            text-align: center;
                            height: 25px;
                            border-radius: 20px;
                            line-height: 25px;
                            position: absolute;
                            top: 0;
                            right: 5px;
                         
                            background-color: rgba($color: #000000, $alpha: 0.5);
                        }
                        .hidden-play {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translateY(-50%) translateX(-50%);
                            width: 64px;
                            height: 64px;
                            cursor: pointer;
                            opacity: 0;
                            transition: all 0.25s;
                        }
                        &:hover{
                            img{
                                transform: scale(1.1);
                            }
                            .hidden-play{
                                opacity: 1;
                               
                            }
                        }
                    }
                    .mvs-content{
                        height: 35px;
                        line-height: 35px;
                        font-size: 14px;
                 
                        padding: 5px 10px;
                    }
                }
            
        }
    }
   
   
}